
<script  lang="ts" setup>
    import type {  ReactionList } from "@/api/auth/types";
    import EntityExtract from "@/api/currentdemo/EntityExtract";
    import AmapComponent from "@/components/GaoDeMap/GaodeMap.vue"
    import { TOKEN_KEY} from "@/enums/CacheEnum";
    
    const Token = <string>localStorage.getItem(TOKEN_KEY);
    const props = defineProps({
		fromDataInfo: {
			type: Object,
			default: true,
		},
	});
    const fromData =  ref({
        phone:'',
        contact_name:'',
        address:'',
        bus_type:'',
        cat1:'',
        cat2:'',
        description:''
    })
    // 业务类型数组
    const businessList = [
        {
            value: '1',
            label: '咨询',
        },
        {
            value: '2',
            label: '报修',
        },
        {
            value: '3',
            label: '投诉',
        },
    ];
    //反应类别数组
    const categoryList = ref<ReactionList[]>([])
    //反应内容数组
    const contentList = ref<ReactionList[]>([])
    //地图是否显示
    const showMap = ref(true);
    // 默认地图的经纬度
    const mapPoint = ref([0, 0])
    //切换业务类型的函数
    function handleOption1Change(value:any){
        if (value==2) {
            categoryList.value = [  
                { value: '2-1', label: '水管设备' },  
                { value: '2-2', label: '用水问题' },
                { value: '2-3', label: '水质问题' }  
            ];
        }else{
            categoryList.value = []
            contentList.value = []
            fromData.value.cat1 = '请选择';
            fromData.value.cat2 = '请选择';
        }
    }
    //切换反应类别的函数
    function handCategory(value:any){
        if (value=='2-1') {
            contentList.value = [
                { value: '3-1-1', label: '水表冻坏' },  
                { value: '3-1-2', label: '水管漏水' },
                { value: '3-1-3', label: '水表漏水' },
                { value: '3-1-4', label: '阀门坏' },
                { value: '3-1-5', label: '阀门漏水' }, 
                { value: '3-1-6', label: '阀门关不上'}, 
                { value: '3-1-7', label: '其他' } 
            ]
        }else if(value=='2-2'){
            contentList.value = [
                { value: '3-2-1', label: '无水' },  
                { value: '3-2-2', label: '多户无水' },
                { value: '3-2-3', label: '水压不稳' },
                { value: '3-2-4', label: '水管异响' },
                { value: '3-2-5', label: '其他' }, 
            ]
        }else if(value=='2-3'){
            contentList.value = [
                { value: '3-3-1', label: '水黄' },  
                { value: '3-3-2', label: '水白' },
                { value: '3-3-3', label: '水中有异物' },
                { value: '3-3-4', label: '水有异味' },
                { value: '3-3-5', label: '其他' }, 
            ]
        }
    }
    // 保存案件的函数
    function onClickCase(){
        ElMessage.success('案件已成功保存')
    }
    watch(()=>props.fromDataInfo,(newValue:any,oldValue:any)=>{
        fromData.value=Object.assign(fromData.value,newValue)
        if (newValue.bus_type!='') {
            businessList.forEach((item,index)=>{
                if (newValue.bus_type==item.label) {
                    fromData.value.bus_type =item.value
                }
            })
            handleOption1Change(fromData.value.bus_type)
        }
        if (newValue.cat1!=''){
            var catetory = true;
            categoryList.value.forEach((item,index)=>{
                if (newValue.cat1==item.label) {
                    fromData.value.cat1 = item.value
                    catetory = false;
                }
            })
            if (catetory) {
                fromData.value.cat1 = '请选择';
            }
            handCategory(fromData.value.cat1)
            if (newValue.cat2!='') {
                var content  = true;
                if (contentList.value.length>0) {
                    contentList.value.forEach((item,index)=>{
                        if (newValue.cat2==item.label) {
                            fromData.value.cat2 = item.value
                            content = false
                        }
                    })
                }else{
                      fromData.value.cat2 = '请选择'
                }
                if (content) {
                    fromData.value.cat2 = '请选择';
                }
            }
        }
        if (newValue.address!='') {
            EntityExtract.getAmpLocation(Token,newValue.address).then(res => {
                if (res.data && res.data.lat !== '' && res.data.lng !== '') {
                    // console.log('res.data', res.data);
                    showMap.value = false;
                    mapPoint.value = [res.data.lat, res.data.lng];
                } else {
                    showMap.value = true;
                }
            })
        }else{
            showMap.value = true;
        }
    },{immediate:true,deep:true})
</script>

<!-- 辅助回答右边的案件信息 -->
<template>
    <section class="h-full w-110 from-list flex  flex-col">
        <div class="info-box">
            <div class="py-2.5 font-semibold text-sm text-center title">案件信息录入</div>
            <el-form :model="fromData" label-width="auto" style="max-width: 400px">
                <el-form-item label="联系电话" required >
                    <el-input v-model="fromData.phone"   maxlength="11" @input="fromData.phone = fromData.phone.replace(/^(0+)|[^\d]+/g,'')"  />
                </el-form-item>
                <el-form-item label="反映人" required>
                    <el-input v-model="fromData.contact_name" />
                </el-form-item>
                <el-form-item label="详细地址" required>
                    <el-input v-model="fromData.address" />
                </el-form-item>
                <el-form-item label="业务类型" required>
                    <el-select
                    v-model="fromData.bus_type" 
                    size="large"
                    @change="handleOption1Change"
                    >
                    <el-option
                            v-for="item in businessList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="反应类别" required>
                    <el-select
                    v-model="fromData.cat1" 
                    size="large"
                        @change="handCategory"
                    >
                    <el-option
                            v-for="item in categoryList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="反应内容" required>
                    <el-select
                    v-model="fromData.cat2" 
                    size="large"
                    >
                    <el-option
                            v-for="item in contentList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                </el-select>
                </el-form-item>
                <el-form-item label="备注" >
                    <el-input type="textarea"   v-model="fromData.description" />
                </el-form-item>
            </el-form>
            <div class="pr-2 mb-2">
                <el-button type="primary" size="large" class="float-right" @click="onClickCase">保存案件</el-button>
            </div>
        </div>
        <div class="entity-bottom  w-full" id="MyMap" v-show="!showMap">
            <AmapComponent mapId="myMap" :center="mapPoint" :zoom="16" />
        </div>
    </section>
</template>

<style scoped>
.from-list{
    background-color:var(--el-bg-color-overlay);
    border-left: 1px solid var(--v-ai-rate-border-color);
}
.title{
    color: var(--v-session-hist);
    padding-bottom: 15px;
}
.info-box{
    padding: 0 15px;
    padding-bottom: 10px;
}
.from-list /deep/ .el-form-item {
    padding: 0 5px;
 }
.from-list /deep/ .el-form-item__label{
    font-weight: bold;
}
.entity-bottom {
    flex:1;
    border-top: 1px solid var(--v-nav-border-color);
}

</style>